<template>
	<view class="popular-science">
		<view class="fiexd-case">
			<!-- 搜索框 -->
			<input-search :disabled="true" />
			<!-- tab选项卡 -->
			<view class="popular-tabs">
				<v-tabs
					v-model="current"
					:tabs="tabs"
					:scroll="false"
					color="#333333"
					activeColor="#34D1A9"
					fontSize="32rpx"
					lineHeight="6rpx"
					lineColor="#34D1A9"
					lineRadius="22rpx"
					lineScale="0.3"
					@change="changeTab"
				></v-tabs>
			</view>
		</view>
		<!-- 列表 -->
		<view class="popular-list">
			<view class="popular-item" v-for="(item, index) in list" :key="index">
				<view class="popular-left">
					<view class="popular-content">是大家看法哈桑的空间发哈四大皆空崇拜你啊是大家看法哈桑打开收到付款计划</view>
					<view class="popular-time">1998-00-98</view>
				</view>
				<image class="popular-right" src="https://nabercat.oss-cn-hangzhou.aliyuncs.com/15456303108155.jpeg" mode="aspectFill"></image>
			</view>
		</view>
		<!-- 结束图片 -->
		<end-img />
	</view>
</template>

<script>
import InputSearch from '@/components/inputSearch/inputSearch.vue';
import vTabs from '@/components/v-tabs/v-tabs.vue';
import EndImg from '@/components/endImg/endImg.vue';
export default {
	components: {
		InputSearch,
		vTabs,
		EndImg
	},
	data() {
		return {
			current: 0,
			tabs: ['推荐', '热门', '视频', '猫咪养生'],
			list: [1, 2, 3, 4, 5, 6, 7, 8, 9]
		};
	},
	methods: {
		// tab切换
		changeTab(event) {
			console.log(event);
		}
	},
	onLoad(options) {}
};
</script>

<style scoped lang="scss">
.popular-science {
	padding: 210rpx 32rpx 24rpx;
	.fiexd-case {
		padding: 24rpx 32rpx 0;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		background: #ffffff;
		// .popular-tabs {
		// 	margin: 20rpx 0 32rpx;
		// }
	}
	.popular-list {
		.popular-item {
			display: flex;
			margin-bottom: 40rpx;
			&:nth-last-of-type(1) {
				margin-bottom: 0;
			}
			.popular-left {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				flex: 1;
				margin-right: 26rpx;
				.popular-content {
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
					font-size: 28rpx;
					color: #383b40;
					line-height: 40rpx;
				}
				.popular-time {
					font-size: 20rpx;
					color: #b7b8ba;
				}
			}
			.popular-right {
				width: 200rpx;
				height: 120rpx;
				border-radius: 8rpx;
			}
		}
	}
}
</style>
